<script setup lang="ts">
import { useUserStore } from '@/store/user'
import { ref } from 'vue';
const userStore = useUserStore()
function Jump(){
	uni.navigateTo({
		url:"/pages/my/profile"
	})
}
const popupShow = ref(false)
const licensePlateShow = ref(userStore.user.licensePlate)
</script>

<template>
  <view style="">
      <view style="padding-top: 100rpx; height: 300rpx; background-color:#edd9fd ">
        <!-- 个人资料 -->
        <view class="profile" @click="Jump">
          <!-- 已登录 -->
          <view class="overview" v-if="userStore.token">
            <!-- 跳转到个人信息页 -->
            <view >
              <image
                class="avatar"
                :src="userStore.user.headImage || '/static/touxiang.svg'"
                mode="aspectFill" />
            </view>
            <view @click="Jump" class="meta">
              <view class="nickname">{{ userStore.user.name }}</view>
              <view class="extra">
                <text class="update">更新头像昵称</text>
                <!-- <text class="relogin">切换账号</text> -->
              </view>
            </view>
          </view>
          <!-- 未登录 -->

			  <view class="settings">
				设置
			  </view>
        </view>
      </view>
	 <u-cell-group>
	     <u-cell
	     	    title="我的账单"
	     	    isLink
				url="/pages/my/myorders"
	     	/>
			<u-cell
				    title="账单报销"
				    isLink
					url="/pages/my/orders-reimbursed"
				/>
		<!-- 	<u-cell
				title="个人资料"
				isLink
				url="/pages/my/datadetails"
			/> -->
			<u-cell
				title="申请申诉"
				isLink
				url="/pages/my/complaint"
				/>
			 <u-cell
				url="/pages/my/message"
				title="消息"
				isLink
			 ><template #value>
					<view>
						<view class="box">
							 <up-badge max="99" :value="99"/>
						</view>
					</view>
				</template>
			 </u-cell>
			 <u-cell title="关联车辆" @click="popupShow = true"/>
	 </u-cell-group>
	 
	<u-popup :show="popupShow" mode="center" @close="popupShow=false" :closeable="true" :customStyle="{lineHeight:'300rpx',width:'650rpx',height:'300rpx'}" safeAreaInsetBottom :round="10">
		 <view style="text-align: center;" v-if="licensePlateShow">
			 <text>车辆信息：{{userStore.user.licensePlate}}</text>
		 </view>
		 <view style="text-align: center;" v-else>
			 <text>无关联车辆信息</text>
		 </view>
	</u-popup>
	 
  </view>
  
</template>

<style lang="scss">
	
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}

scroll-view {
  height: 100%;
}

.navbar {
  width: 750rpx;
  height: 220rpx;
  background-image: url(https://nn.trd.ink/appfile/images/center_bg.png);
  // background-size: contain;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}

.navbar .title {
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
  opacity: 0;
  font-weight: bold;
}

.profile {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 35rpx;
}

.profile .overview {
  display: flex;
  width: 500rpx;
  height: 120rpx;
  padding: 0 36rpx;
  color: #fff;
}

.profile .overview .avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.profile .overview .meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  line-height: 30rpx;
  padding: 16rpx 0;
  margin-left: 20rpx;
}

.profile .meta .nickname {
	color: #000;
  max-width: 180rpx;
  margin-bottom: 16rpx;
  font-size: 30rpx;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile .meta .extra {
  display: flex;
  font-size: 20rpx;
}

.profile .meta .tips {
  font-size: 22rpx;
}

.profile .meta .update,
.profile .meta .relogin {
  padding: 3rpx 10rpx 1rpx;
  color: #000;
  border: 1rpx solid rgba(172, 172, 172, 1);
  margin-right: 10rpx;
  border-radius: 30rpx;
}

.profile .settings {
	margin-right: 40rpx;
 height: 120rpx;
 line-height: 120rpx;
 color: #000 ;
font-size: 30rpx;
}



  
</style>
